<!-- 商品详情 -->
<template>
  <div class="index-container">
    <div class="goods-pay-detail-header-box">
      <GoBack />
      <div class="header-bg">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in goodsDetails.images" :key="item">
            <van-image fit="cover" position="center" :src="item"></van-image>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="goods-pay-detail-main">
      <div class="goods-pay-detail-main-price">
        <span>{{ goodsDetails.price }}</span>
        <h3>{{ goodsDetails.name }}</h3>
      </div>
      <div class="goods-pay-detail-main-content">
        <h4>商品详情</h4>
        <div
          class="goods-pay-detail-content"
          v-html="goodsDetails.description"
        ></div>
      </div>
      <van-submit-bar
        :price="Number(goodsDetails.price) * 100"
        :loading="isLoading"
        button-text="立即购买"
        @submit="onClickButton"
      />
    </div>
  </div>
</template>
  <script setup>
import { computed, reactive, toRefs, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";

import icon_hand3 from "@/assets/image/icon_hand3.png";
import bgImg from "@/assets/image/01.png";
import GoBack from "@/components/goBack/index.vue";

import { CreateGoodsOrder } from "@/api/goods/index.js";

import { GetGoodsDetails } from "@/api/index.js";

import { showToast } from "vant";

const route = useRoute();
const router = useRouter();

const state = reactive({
  icon_hand3,
  bgImg,
  labelsColor: [
    "#ff5e95",
    "#feac20",
    "#21e4e0",
    "#9670ff",
    "#ff7ca0",
    "#4ea9fc",
  ],
  tabsList: [
    {
      id: 1,
      name: "动态",
    },
  ],
  goodsDetails: {
    image: [],
    isFollow: false,
    price: 0,
  },
});

const { goodsDetails } = toRefs(state);

let anchorId = ref();

const GetGoodsDetailsData = async () => {
  let params = {
    id: route.query.goodsId,
  };
  let { data } = await GetGoodsDetails(params);
  state.goodsDetails = data;
};

const openTelephone = () => {
  showToast("功能开发中，敬请期待！");
};

const updateFollow = (ev) => {
  state.anchorInfo.isFollow = ev;
  console.log(ev, state.anchorInfo.isFollow);
};

let show = ref(false);
const viewImg = () => {
  show.value = true;
};

let isLoading = ref(false);
let setIntTime = null;
let orderNum = "";
let isPay = false;
let isWxPay = ref(false);
const alipay = async () => {
  orderNum = "";
  isPay = false;
  let paramsorder = {
    goodsId: route.query.goodsId,
    orderType: 5,
  };
  isLoading.value = true;
  let datares = await CreateGoodsOrder(paramsorder);
  let resData = datares.data;
  isLoading.value = false;
  document.getElementById("payMent").innerHTML = resData;
  let namevalue = document.getElementsByName("biz_content")[0].value;
  orderNum = JSON.parse(namevalue);
  localStorage.setItem("out_trade_no", orderNum.out_trade_no);
  document.forms[0].setAttribute("target", "_self"); // 当前窗口跳转
  document.forms[0].submit();
  document.getElementById("payMent").innerHTML = "";
};

// 立即购买
const onClickButton = () => {
  alipay();
};

onMounted(() => {
  anchorId.value = route.query.anchorId;
  GetGoodsDetailsData();
});
</script>
  
  
  
  <style lang="scss" scoped>
.index-container {
  padding-top: 0;
  background: #fff;
}

.goods-pay-detail-back {
  position: fixed;
  top: 10px;
  left: 10px;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
  z-index: 9;
}
.header-bg {
  .van-image {
    display: block;
    width: 100%;
    height: 100%;
  }
}
.my-swipe {
  width: 100%;
  height: 45vh;
  background: #fff;
}
.goods-pay-detail-main {
  position: relative;
  margin-top: -30px;
  z-index: 2000;
  background: linear-gradient(to bottom, #fff 0%, #f2f2f2 100%);
  border-radius: 15px 15px 0 0;
  min-height: calc(55vh - 30px);
  h3 {
    font-size: 16px;
    margin-top: 5px;
  }
}
.goods-pay-detail-main-price {
  padding: 15px;
  span {
    color: #f00;
    font-size: 24px;
    font-weight: bold;
    &::before {
      content: "￥";
      font-size: 12px;
      font-weight: normal;
    }
  }
}
.goods-pay-detail-main-content {
  padding: 15px;
  border-radius: 15px 15px 0 0;
  background: #fff;
  min-height: calc(50vh - 113px);
  h4 {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: normal;
    color: $default-color;
  }
}

</style>
  